<script setup lang="ts">
import { ref } from 'vue';
import { getMoveData } from '@/api/move';
import { ElMessage } from 'element-plus';
const worknum = ref('')
const isLoading = ref(false)
const tableData = ref([])

function getData() {
    if (worknum.value !== '') {
        getMoveData(worknum.value).then((res: any) => {
            tableData.value = res
        }).finally(() => {
            isLoading.value = false
        })
    }
    else {
        ElMessage({ type: 'warning', message: "請輸入工號查詢" })
    }
}

function formatter(date: string) {
    if (date) {
        return new Date(date).toLocaleString();
    }
}
</script>

<template>
    <el-container>
        <el-header style="line-height: 60px; text-align: center;">
            <el-input v-model="worknum" style="width: 150px; margin-right: 50px" placeholder="請輸入工號開始查詢" />
            <button @click="getData">
                <span class="transition"></span>
                <span class="gradient"></span>
                <span class="label">查詢</span>
            </button>
        </el-header>
        <el-main>
            <vxe-table :data="tableData" :loading="isLoading" :column-config="{ resizable: true }"
                :row-config="{ isHover: true }" align="center">
                <vxe-column type="seq" title="序號" width="60"></vxe-column>
                <vxe-column field="badge_no" title="工號"></vxe-column>
                <vxe-column field="action_category" title="類型"></vxe-column>
                <vxe-column field="dorm_name" title="宿舍棟"></vxe-column>
                <vxe-column field="room_num" title="房間號"></vxe-column>
                <vxe-column field="bed_num" title="床號"></vxe-column>
                <vxe-column field="livein_date" title="入住日期">
                    <template v-slot="{ row }">
                        <span>{{ formatter(row.livein_date) }}</span>
                    </template>
                </vxe-column>
                <vxe-column field="liveout_date" title="搬出日期">
                    <template v-slot="{ row }">
                        <span>{{ formatter(row.liveout_date) }}</span>
                    </template>
                </vxe-column>
            </vxe-table>
        </el-main>
    </el-container>
</template>

<style>
button {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
        "Liberation Mono", "Courier New", monospace;
    font-size: 17px;
    padding: 1em 2.7em;
    font-weight: 500;
    background: #2d3e56;
    color: white;
    border: none;
    position: relative;
    overflow: hidden;
    border-radius: 0.6em;
    cursor: pointer;
    width: 70px;
    height: 35px;
    top: 13px;
}

.gradient {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 0.6em;
    margin-top: -0.25em;
    background-image: linear-gradient(rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0),
            rgba(0, 0, 0, 0.3));
}

.label {
    position: relative;
    top: -13px;
    left: -35px;
    width: 70px;
    height: 35px;
    display: block;

}

.transition {
    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
    transition-duration: 500ms;
    background-color: rgba(16, 185, 129, 0.6);
    border-radius: 9999px;
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

button:hover .transition {
    width: 14em;
    height: 14em;
}

button:active {
    transform: scale(0.97);
}
</style>